'use strict'
import { View } from '../../component'
import style from './css.css'
import setTitle from '../../config/setTitle'
const STATUS = [style.listItemState, style.listItemState1, style.listItemState2, style.listItemState3]
import { observer, inject } from 'mobx-react'
@inject('user') @observer class Item extends React.Component {
  static propTypes = {
    item: PropTypes.object,
    user: PropTypes.object,
    history: PropTypes.object
  }
  _handleTap = this._handleTap.bind(this)
  _handleTap () {
    if (!this.props.user.userInfo.uuid) {
      this.props.user.getUserInfo(true)
    }
    else {
      setTitle(this.props.item.author.name)
      this.props.history.push(`/live/${this.props.item.room_id_str}/${this.props.item.tx_detail.anchor_id}`)
    }
  }
  render () {
    let index = 0
    const status = this.props.item.doll_detail.doll_status
    if (status === 6) { index = 3 }
    if (status === 3 || status === 8) { index = 1 }
    if (status === 0 || status === 7) { index = 2 }
    return (
      <View className={style.listItem} tap={this._handleTap}>
        <View className={style.listItemBgImage} style={{ backgroundImage: `url(${this.props.item.doll_detail.doll_pic})` }}></View>
        <View className={style.listItemName}>{this.props.item.doll_detail.doll_name}</View>
        <View className={style.listItemMoney}>
          <View className={style.listItemMoneyIcon}></View>
          {this.props.item.doll_detail.doll_play_pay}
        </View>
        <View className={style.listItemFlag} style={{ backgroundImage: `url(${this.props.item.doll_detail.doll_label})` }}></View>
        <View className={STATUS[index]}></View>
      </View>
    )
  }
}

export default Item
